<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="">
          <el-select
            size="small"
            v-model="listQuery.case_type"
            placeholder="案件类型"
            clearable
          >
            <el-option
              v-for="item in case_types"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            size="small"
            style="min-width: 210px"
            v-model="listQuery.name"
            placeholder="律师/收案人/委托人/当事人"
            clearable
            @keyup.enter.native="handleFilter"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="small"
            style="min-width: 210px"
            v-model="listQuery.reason"
            placeholder="案由"
            clearable
            @keyup.enter.native="handleFilter"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            size="small"
            v-model="listQuery.search_date"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            @click.native="handleFilter"
            >查询</el-button
          >
        </el-form-item>
        
      </el-form>
      <el-table
        :data="cases"
        border
        v-loading="listLoading"
        fit
        highlight-current-row
        style="width: 100%"
        size="small"
      >
        <el-table-column type="expand" align="center">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.letters"
              border
              v-if="scope.row.letters.length > 0"
              size="mini"
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column align="center" label="律所函编号" prop="code" />
              <!-- <el-table-column align="center" label="委托人" prop="client" /> -->
              <el-table-column align="center" label="当事人" prop="party" />
              <el-table-column align="center" label="针对机关" prop="court" />
              <el-table-column align="center" label="案由/罪名" prop="reason" />
              <el-table-column align="center" label="律师" prop="lawyer" />
              <el-table-column
                align="center"
                label="盖章时间"
                prop="stamp_time"
                :formatter="dataFormatter"
              />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    size="mini"
                    icon="el-icon-printer"
                    @click="handlePrint(scope.row)"
                    v-if="scope.row.apply_confirm == true"
                    >打印</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-table
              :data="scope.row.introduces"
              border
              fit
              v-if="scope.row.introduces.length > 0"
              size="mini"
              style="width: 100%"
            >
              <el-table-column align="center" label="介绍信编号" prop="code" />
              <el-table-column align="center" label="看守所" prop="court" />
              <el-table-column align="center" label="律师" prop="lawyer" />
              <el-table-column align="center" label="当事人" prop="party" />
              <el-table-column align="center" label="罪名" prop="reason" />
              <el-table-column
                align="center"
                label="盖章时间"
                prop="stamp_time"
                :formatter="dataFormatter"
              />
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="warning"
                    size="mini"
                    icon="el-icon-printer"
                    @click="handlePrint(scope.row)"
                    v-if="scope.row.apply_confirm == true"
                    >打印</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="#"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="column in tableColumns"
          :key="column.key"
          :label="column.title"
          :prop="column.key"
          :align="column.align ? column.width : 'center'"
          :width="column.width ? column.width : ''"
        >
          <template slot-scope="scope">
            <div v-if="column.key == 'current_phase'">
              <el-link
                v-if="scope.row[column.key].length > 0"
                @click="handleProgress(scope.row)"
                type="primary"
                icon="el-icon-edit-outline"
                >{{ scope.row[column.key] }}</el-link
              >
            </div>
            <div v-else>
              <span>{{ scope.row[column.key] }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          :width="120"
        >
          <template slot-scope="scope">

            <el-button
              type="success"
              size="mini"
              icon="el-icon-search"
              @click="handleEdit(scope, 'detail')"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getCaseList"
      />
    </el-card>
    <!-- 案件登记 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="getTitle"
      width="800px"
      destroy-on-close
      @close="handleClose"
      @open="handleOpen"
      top="10px"
    >
      <el-form
        :model="form"
        ref="formRef"
        label-width="100px"
        label-position="right"
        style="width: 95%; padding: 0 30px"
        status-icon
        size="small"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件类型" prop="case_type">
              <el-input
                type="text"
                v-model="form.case_type_name"
                placeholder="案件类型"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存档编号" prop="code">
              <el-input
                type="text"
                v-model="form.code"
                placeholder="存档编号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="委托人" prop="client">
              <el-input
                type="text"
                v-model="form.client"
                placeholder="委托人"
                :disabled="form.user != null && form.user != uid"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="telephone">
              <el-input
                v-model="form.telephone"
                placeholder="电话"
                :disabled="form.user != null && form.user != uid"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="当事人" prop="party">
              <el-input
                v-model="form.party"
                placeholder="当事人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收案人" prop="recv_lawyer">
              <el-input
                v-model="form.recv_lawyer"
                placeholder="收案人"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主办律师" prop="lead_lawyer">
              <el-input
                v-model="form.lead_lawyer_name"
                placeholder="主办律师"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出庭律师1" prop="assist_lawyer">
              <el-input
                v-model="form.assist_lawyer_name"
                placeholder="出庭律师"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="出庭律师2" prop="third_lawyer">
              <el-input
                v-model="form.third_lawyer_name"
                placeholder="出庭律师"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="对方当事人"
              prop="oppo_party"
              v-if="form.case_type != 2"
            >
              <el-input
                v-model="form.oppo_party"
                placeholder="对方当事人"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              v-if="form.case_type == 2 || form.case_type == 5"
              label="罪 名"
              prop="reason"
            >
              <el-input v-model="form.reason" placeholder="罪名"  />
            </el-form-item>
            <el-form-item
              v-else
              label="案 由"
              prop="reason"
            >
            <el-input v-model="form.reason" placeholder="案 由"  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="管辖法院"
              prop="court"
            >
              <el-input v-model="form.court" placeholder="管辖法院" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="审 级"
              prop="level"
            >
              <el-input v-model="form.level" placeholder="审级"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="立案时间"
              prop="register_time"
              v-if="form.case_type != 2"
            >
              <el-date-picker
                v-model="form.register_time"
                type="date"
                placeholder="立案时间"
                value-format="yyyy-MM-dd"
                readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开庭时间"
              prop="open_time"
            >
              <el-date-picker
                v-model="form.open_time"
                type="date"
                placeholder="开庭时间"
                value-format="yyyy-MM-dd"
                readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item
              label="结案时间"
              prop="end_time"
            >
              <el-date-picker
                v-model="form.end_time"
                type="date"
                placeholder="结案时间"
                value-format="yyyy-MM-dd"
                readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="案号"
              prop="case_num"
            >
              <el-input v-model="form.case_num" placeholder="案号" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.id != null">
          <el-col :span="24">
            <el-form-item label="案件资料">
              <el-upload
                ref="upload"
                action="/api/case/file_upload/"
                multiple
                :on-preview="handlePreview"
                :before-upload="handleBeforeUpload"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
                :file-list="fileList"
                :auto-upload="false"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.rar,.zip,.PDF,.DOC,.DOCX,.XLS,.XLSX,.RAR,.ZIP"
                :headers="headerObj"
                :data="uploadData"
                :disabled="form.id == null || form.archive_flag == true"
              >
                <div v-if="form.archive_flag != true">
                  <el-button slot="trigger" size="small" type="primary"
                    >选取文件</el-button
                  >
                  <el-button
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="submitUpload"
                    >上传到服务器</el-button
                  >
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="归档"
              prop="archive_flag"
              v-if="dialogType == 'edit'"
            >
              <el-switch
                v-model="form.archive_flag"
                @change="handleArchive"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSave(false)"
          v-if="dialogType != 'detail'"
          >保存</el-button
        >
        <!-- <el-button
          type="primary"
          v-if="dialogType == 'new'"
          @click="handleSave(true)"
          >保存并新增</el-button
        > -->
      </div>
    </el-dialog>
    <!-- 案件进度 -->
    <el-dialog
      :visible.sync="dlgProgressVisible"
      :title="'设置案件办理进度--' + case_code"
      width="800px"
    >
      <div style="display: flex; align-items: top">
        <el-checkbox-group
          v-model="checkProgressList"
          v-if="archive_flag != true"
        >
          <el-table
            :data="progressList"
            highlight-current-row
            row-key="id"
            border
            size="mini"
            style="width: 300px"
            max-height="500"
            default-expand-all
            :indent="32"
          >
            <el-table-column label="案件进度项列表" prop="name">
              <template slot-scope="scope">
                <el-checkbox
                  :label="scope.row.id"
                  :key="scope.row.id"
                  @change="
                    (checked) => handleProgressChange(checked, scope.row.id)
                  "
                  ><span :style="scope.row.is_final ? 'color:red' : ''">{{
                    scope.row.name
                  }}</span></el-checkbox
                >
              </template>
            </el-table-column>
          </el-table>
        </el-checkbox-group>
        <div
          style="padding: 0px; display: flex; align-items: center; width: 10px"
        ></div>
        <el-table
          :data="selProgress"
          highlight-current-row
          row-key="id"
          border
          size="mini"
          style="width: 400px"
          max-height="500"
        >
          <el-table-column
            type="index"
            label="#"
            align="center"
          ></el-table-column>
          <el-table-column label="已办理进度列表" prop="progress_name" />
          <el-table-column
            label="时间"
            prop="add_time"
            :formatter="dataFormatter"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            v-if="archive_flag != true"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete"
                @click="deleteProgress(scope)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer">
        <el-button type="danger" size="small" @click="onProgressClose"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getCases,
  addCase,
  updateCase,
  delCase,

  getProgressList,
  addCaseProgress,
  delCaseProgress,
  getAllReason,
  delCaseFile,
} from "@/api/case";

import Transfer from "@/components/Transfer";
import { getUserList } from "@/api/user";
import { formatDateTime } from "@/utils/datetime";
import Pagination from "@/components/Pagination";

const defaultForm = {
  id: null,
  code: "",
  client: "",
  party: "",
  telephone: "",
  oppo_party: "",
  case_type: null,
  recv_lawyer: "",
  reason: "",
  court: "",
  level: "",
  lead_lawyer: null,
  assist_lawyer: null,
  third_lawyer: null,
  register_time: null,
  open_time: null,
  end_time: null,
  case_num: "",
  // comment: "",
  files: null,
  user: null,
  archive_flag: false,
};

const defaultLetterForm = {
  id: null,
  code: "",
  case: null,
  case_code: "",
  court: "",
  level: "",
  client: "",
  party: "",
  lawyer: null,
  reason: "",
  apply_confirm: null,
  user: null,
};

const defaultIntroForm = {
  id: null,
  code: "",
  case: null,
  case_code: "",
  court: "",
  party: "",
  lawyer: null,
  reason: "",
  apply_confirm: null,
  user: null,
};

export default {
  name: "Archives",
  data() {

    return {
      form: Object.assign({}, defaultForm),
      letterForm: Object.assign({}, defaultLetterForm),
      introForm: Object.assign({}, defaultIntroForm),

      value: [],

      tableColumns: [
        {
          key: "code",
          title: "存档编号",
          width: "140",
        },
        // {
        //   key: "client",
        //   title: "委托人",
        // },
        {
          key: "party",
          title: "当事人",
        },
        {
          key: "case_type_name",
          title: "案件类型",
          width: "120",
        },
        // {
        //   key: "reason",
        //   title: "案由/罪名",
        // },
        {
          key: "level",
          title: "审级",
          width: "100",
        },
        {
          key: "recvtime",
          title: "收案时间",
          width: "120",
        },
        {
          key: "current_phase",
          title: "办理进度",
          align: "left",
        },
      ],
      title: "归档案件",
      case_type: null,
      dialogVisible: false,
      dlgProgressVisible: false,

      dialogType: "new",
      cases: [],
      //案件进度
      case_id: null,
      case_code: "",
      archive_flag: null,
      checkProgressList: [],
      progressList: [],
      orgProgressList: [],
      selProgress: [],
      reasons: [],
      users: [],
      case_types: [
        { id: 1, name: "民事" },
        { id: 2, name: "刑事" },
        { id: 3, name: "行政" },
        { id: 4, name: "刑附民" },
        { id: 5, name: "刑事自诉" },
        { id: 6, name: "仲裁" },
        { id: 7, name: "执行案件" },
      ],

      total: 0,
      listLoading: true,
      progressLoading: true,
      listQuery: {
        page: 1,
        page_size: 15,
        name: null,
        case_type: null,
        search_date: "",
        archive_flag: 1,
        reason: null,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      fileList: [],
    };
  },
  computed: {
    ...mapGetters(["uid", "is_super", "token"]),
    getTitle() {
      return this.dialogType == "new"
        ? `新增${this.title}`
        : `查看${this.title}`;
    },
    headerObj() {
      return {
        authorization: "JWT " + this.token,
      };
    },
    uploadData() {
      console.log(this.form.id);
      return {
        case_id: this.form.id,
      };
    },
  },
  
  components: {
    Pagination,
    Transfer,
  },
  created() {
    this.getCaseList();
    // this.getAllReason();
    // this.getAllUser();
  },
  methods: {
    transferChange(value, direction, movedKeys) {
      console.log("transferChange:", value, direction, movedKeys);
      // this.progressList = this.orgProgressList;
    },
    getCaseList() {
      this.listLoading = true;
      getCases(this.listQuery)
        .then((res) => {
          this.cases = res.results;
          this.listLoading = false;
          this.total = res.count;
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取案件信息失败!");
          this.listLoading = false;
        });
    },
    getProgresses(params) {
      this.progressLoading = true;
      getProgressList(params)
        .then((res) => {
          this.progressList = res;
          this.orgProgressList = res;
          this.progressLoading = false;
        })
        .catch((error) => {
          console.log(error.message);
          this.$message.error("获取数据失败");
          this.progressLoading = false;
        });
    },

    getAllReason() {
      getAllReason()
        .then((res) => {
          this.reasons = res.map((item) => {
            return { id: item.id, value: item.name };
          });
        })
        .catch((error) => {
          this.$message.error("读取案由失败!");
        });
    },
    getAllUser() {
      getUserList()
        .then((res) => {
          this.users = res;
        })
        .catch((error) => {
          this.$message.error("读取用户信息失败!");
        });
    },
    //办案进度
    handleProgress(data) {
      this.progressList = [];
      this.selProgress = data.progresses;
      // this.checkProgressList = this.selProgress.map((item) => {
      //   return item.progress;
      // });
      this.checkProgressList = [];
      this.case_id = data.id;
      this.case_code = data.code;
      this.archive_flag = data.archive_flag;
      this.dlgProgressVisible = true;
      const params = {
        case_type: data.case_type,
        case_id: this.case_id,
      };
      this.getProgresses(params);
    },
    deleteProgress({ $index, row }) {
      delCaseProgress(row.id)
        .then((res) => {
          // this.setProgressTime(case_progress.progress, null);
          this.selProgress.splice($index, 1);
        })
        .catch((error) => {
          this.$message.error("删除失败!");
        });
    },
    handleProgressChange(checked, progress_id) {
      //增加
      if (checked) {
        const data = {
          case: this.case_id,
          progress: progress_id,
        };
        addCaseProgress(data)
          .then((res) => {
            this.selProgress.push(res);
          })
          .catch((error) => {
            this.$message.error("添加失败!");
          });
      } else {
        //删除
        // const index = this.selProgress.findIndex(
        //   (v) => v.case === this.case_id && v.progress === progress_id
        // );
        // const case_progress = this.selProgress.splice(index, 1)[0];
        // if (case_progress) {
        //   delCaseProgress(case_progress.id)
        //     .then((res) => {
        //       this.setProgressTime(case_progress.progress, null);
        //     })
        //     .catch((error) => {
        //       this.$message.error("取消失败!");
        //     });
        // }
      }
    },
    setProgressTime(progress, progress_time) {
      const index = this.progressList.findIndex((v) => v.id === progress);
      this.progressList[index].progress_time = progress_time;
    },
    onProgressClose() {
      this.dlgProgressVisible = false;
      this.getCaseList();
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1;
      this.getCaseList();
    },



    //关闭对话框
    handleClose() {
      this.fileList = [];
    },
    //打开对话框
    handleOpen() {
      this.$nextTick(() => {
        if (this.form.archive_flag == true) {
          this.$refs.upload.$el.getElementsByClassName("el-upload")[0].style =
            "display:none";
        }
      });
    },
    // 增加
    handleAdd() {
      this.form = Object.assign({}, defaultForm);
      this.dialogType = "new";
      this.dialogVisible = true;
    },
    // 修改
    handleEdit(scope, flag) {
      this.form = Object.assign({}, scope.row);

      this.dialogType = flag;
      this.dialogVisible = true;
      this.case_type = scope.row.case_type;
      this.fileList = scope.row.files;

    },
    
    // 保存操作
    async handleSave(flag) {
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) return;

        const isEdit = this.dialogType === "edit";
        if (isEdit) {
          if (!this.form.user) {
            this.form.user = this.uid;
          }
          const res = await updateCase(this.form);
          const index = this.cases.findIndex((v) => v.id === res.id);
          this.cases.splice(index, 1, res);
        } else {
          this.form.user = this.uid;
          const res = await addCase(this.form);
          const { id } = res;
          if (id > 0) {
            this.cases.unshift(res);
          }
        }

        const { client, party, telephone } = this.form;
        if (flag) {
          this.form = Object.assign({}, defaultForm);
        } else {
          this.dialogVisible = false;
        }

        this.$notify({
          title: "Success",
          dangerouslyUseHTMLString: true,
          message: `
              <div>委托人: ${client}</div>
              <div>当事人: ${party}</div>
              <div>电话: ${telephone}</div>
            `,
          type: "success",
        });
      });
    },

    handlePrint(data) {
      this.$router.push(`/case/civil_print/${data.id}`);
    },
    caseTypeChange(value) {
      // console.log(value);
      this.case_type = value;
      if (value == 2) {
        this.form.register_time = null;
        this.form.oppo_party = "";
      }
    },
    dataFormatter(row, column, cellValue, index) {
      if (column.property == "apply_time") {
        return formatDateTime(cellValue);
      } else if (column.property == "stamp_time") {
        return formatDateTime(cellValue);
      } else if (column.property == "add_time") {
        return formatDateTime(cellValue, "YYYY-MM-DD");
      } else {
        return cellValue;
      }
    },
    querySearch(queryString, cb) {
      if (this.form.case_type == 3 || this.form.case_type == 6) {
        cb([]);
        return;
      }
      var reasons = this.reasons;
      console.log(queryString);
      var results = queryString
        ? reasons.filter(this.createFilter(queryString))
        : reasons;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (reason) => {
        return (
          reason.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
        );
      };
    },
    handleSelect(item) {
      console.log(item.value);
      // this.form.reason = item.value
    },
    //文件上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
      var file_id = null;
      file_id = file.id;
      if (file_id == null) {
        if (file.response.status_code == 200) {
          file_id = file.response.file.id;
        }
      }

      if (file_id == null) return;

      delCaseFile(file_id)
        .then((res) => {
          const index = this.form.files.findIndex((item) => item.id == file_id);
          if (index > -1) {
            this.form.files.splice(index, 1);
          }
          this.$message.success("删除成功");
        })
        .catch((error) => {
          this.$message.error("删除失败");
        });
    },
    handlePreview(file) {
      if (file.file) {
        window.open(file.file);
      }
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleSuccess(res, file, filelist) {
      console.log("success:", file, filelist);
      this.fileList = filelist;
      if (res.status_code == 200) {
        file["file"] = file.response.file.file;
        this.form.files.push(file.response.file);
        this.$message.success(res.file.name + "上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    //上传前
    handleBeforeUpload(file) {
      // console.log(file.type);
      const flag = file.size / 1024 / 1024 < 10;
      if (!flag) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return flag;
    },
  },
};
</script>

<style lang='scss' scoped>
.app-container {
  .el-dropdown {
    margin-left: 10px;
  }
  .dialog-inner {
    width: 90%;
    padding: 0 30px;
    .inner-item {
      padding-bottom: 15px;
      padding-left: 10px;
    }
  }
  ::v-deep .el-dialog .el-table thead {
    color: #409eff;
    font-weight: 500;
    font-size: 14px;
  }
  .el-autocomplete {
    width: 100%;
  }
}
</style>